<template>
    <header class="sticky top-0 z-50 bg-white shadow-sm">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between h-16 md:h-20">
                <!-- Logo -->
                <router-link to="/" class="flex items-center space-x-2">
                    <div class="w-10 h-10 rounded-lg bg-primary flex items-center justify-center">
                        <i class="fa fa-book text-white text-xl"></i>
                    </div>
                    <span class="text-xl font-bold text-primary">BookStore</span>
                </router-link>

                <!-- 搜索框 - 仅在中等及以上屏幕显示 -->
                <div class="hidden md:flex items-center flex-1 max-w-md mx-8">
                    <div class="relative w-full">
                        <input type="text" placeholder="搜索图书、作者..."
                            class="w-full py-2 px-4 pl-10 rounded-full border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all"
                            v-model="searchQuery" @keyup.enter="searchBooks" />
                        <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                    </div>
                </div>

                <!-- 导航菜单 -->
                <nav class="flex items-center space-x-6">
                    <router-link to="/books" class="text-gray-700 hover:text-primary transition-colors">
                        图书
                    </router-link>

                    <!-- 购物车图标 -->
                    <div class="relative">
                        <router-link to="/cart" class="text-gray-700 hover:text-primary transition-colors">
                            <i class="fa fa-shopping-cart text-xl"></i>
                        </router-link>
                        <span v-if="cart.totalItems > 0"
                            class="absolute -top-2 -right-2 bg-accent text-white text-xs w-5 h-5 rounded-full flex items-center justify-center">
                            {{ cart.totalItems }}
                        </span>
                    </div>

                    <!-- 用户菜单 - 移动端隐藏 -->
                    <div class="hidden md:block">
                        <button class="flex items-center space-x-2 text-gray-700 hover:text-primary transition-colors">
                            <i class="fa fa-user-circle-o text-xl"></i>
                            <router-link to="/login" class="text-gray-700 hover:text-primary transition-colors">
                                    登录/注册
                                </router-link>
                        </button>
                    </div>

                    <!-- 移动端菜单按钮 -->
                    <button class="md:hidden text-gray-700 hover:text-primary transition-colors"
                        @click="mobileMenuOpen = !mobileMenuOpen">
                        <i class="fa fa-bars text-xl"></i>
                    </button>
                </nav>
            </div>
        </div>

        <!-- 移动端搜索框 -->
        <div class="md:hidden px-4 pb-4">
            <div class="relative w-full">
                <input type="text" placeholder="搜索图书、作者..."
                    class="w-full py-2 px-4 pl-10 rounded-full border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all"
                    v-model="searchQuery" @keyup.enter="searchBooks" />
                <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
            </div>
        </div>

        <!-- 移动端菜单 -->
        <div v-if="mobileMenuOpen" class="md:hidden bg-white shadow-lg rounded-b-lg overflow-hidden">
            <div class="p-4">
                <router-link to="/books" class="block py-2 text-gray-700 hover:text-primary transition-colors">
                    图书
                </router-link>
                <router-link to="/cart" class="block py-2 text-gray-700 hover:text-primary transition-colors relative">
                    <span>购物车</span>
                    <span v-if="cart.totalItems > 0"
                        class="absolute right-0 top-1/2 transform -translate-y-1/2 bg-accent text-white text-xs w-5 h-5 rounded-full flex items-center justify-center">
                        {{ cart.totalItems }}
                    </span>
                </router-link>
                <div class="pt-2">
                    <button class="flex items-center space-x-2 text-gray-700 hover:text-primary transition-colors">
                        <i class="fa fa-user-circle-o"></i>
                        <span>登录/注册</span>
                    </button>
                </div>
            </div>
        </div>
    </header>
</template>

<script setup>
import { ref } from 'vue';
import { useCartStore } from '../stores/cartStore';
import { useRouter } from 'vue-router';

// 获取购物车状态
const cart = useCartStore();
const router = useRouter();

// 状态
const mobileMenuOpen = ref(false);
const searchQuery = ref('');

// 搜索图书
const searchBooks = () => {
    if (searchQuery.value.trim()) {
        router.push({ name: 'Books', query: { search: searchQuery.value } });
    }
};
</script>

<style scoped></style>